import React, { FC, useState } from 'react'
import { NavBar, Space, Toast, Form, Input, Button, Picker } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'

import MyHeader from '../../components/MyHeader'
import { reg } from '../../utils/validate'
import PassInput from '../../components/PassInput'
import CaptchaBtn from '../../components/CaptchaBtn'
import { UserInterFace } from '../../utils/types'
import { captchaVerify, findUser, register } from '../../api/api'
import { ShowErrorMsg, ShowMsg } from '../../utils/message'

const Reg: FC = () => {
    const router = useNavigate()
    const [form] = Form.useForm()
    const [phone, setPhone] = useState()

    // 重置所有
    const resetData = () => {
        form.resetFields()
    }

    // 注册
    const onFinish = async (value: UserInterFace) => {
        // 验证手机号是否满足注册条件
        const res: any = await findUser({ phone })
        if (res.result) {
            ShowMsg('手机号已被注册')
        } else {
            // 验证验证码是否正确
            const captchaRes: any = await captchaVerify({ phone, captcha: value.captcha })
            if (captchaRes.data) {
                // 完成注册
                const params = {
                    phone: value.phone,
                    password: value.password,
                    username: value.username
                }
                const successRes: any = await register(params)
                if (successRes.code == 200) {
                    ShowMsg('注册成功')
                    router('/main/mine')
                }
            } else {
                ShowErrorMsg('验证码错误')
            }
        }
    }

    return (
        <div>
            <div>
                <MyHeader title='注 册'></MyHeader>
            </div>

            <Form layout='horizontal' mode='card' form={form} onFinish={onFinish}>
                <Form.Header>欢迎新用户注册！请填写以下信息</Form.Header>
                <Form.Item
                    label='用户名：'
                    name='username'
                    rules={[{ required: true, message: '用户名不能为空' }]}
                >
                    <Input placeholder='请输入用户名' clearable />
                </Form.Item>
                <Form.Item
                    label='手机号：'
                    name='phone'
                    rules={[
                        { required: true, message: '手机号不能为空' },
                        { pattern: reg.phone, message: '手机号格式不正确' }
                    ]}
                >
                    <Input placeholder='请输入手机号' clearable onChange={(phone: any) => setPhone(phone)} />
                </Form.Item>

                <CaptchaBtn phone={phone}></CaptchaBtn>

                <PassInput dependencies={['dbpass']}></PassInput>

                <PassInput
                    label='确认密码'
                    name='dbpass'
                    dependencies={['password']}
                    rules={
                        [
                            ({ getFieldValue }) => ({
                                validator(_: any, value: any) {
                                    if (!value || !reg.pwd.test(value) || getFieldValue('password') === value) {
                                        return Promise.resolve()
                                    }
                                    return Promise.reject(new Error('两次密码不一致'))
                                }
                            })
                        ]
                    }
                ></PassInput>

                <div style={{marginTop:'50px'}}>
                    <Space style={{ width: '100%', display: 'flex', justifyContent: 'space-evenly' }}>
                        {/* <Button color="success" block onClick={subimtReg}>注册账号</Button> */}
                        <Button color="success" block type="submit" >注册账号</Button>

                        <Button color="danger" block onClick={resetData}>重置所有</Button>
                    </Space>
                </div>
            </Form>
        </div>
    )
}

export default Reg
